<template>
  <view class="view-content">
    <s-nav title="新增成员" />
    <s-content>
      <view class="main">
        <view class="applicant-from" :class="formData.id ? 'form-state' : null">
          <!-- 表单 -->
          <uni-forms :modelValue="formData" ref="form" :rules="rules">
            <uni-forms-item v-if="formData.id" label="姓名">
              <text>{{ formData.name }}</text>
            </uni-forms-item>
            <uni-forms-item
              :required="!formData.id"
              label="与证明人员关系"
              name="relation"
            >
              <s-picker
                v-if="isRelation"
                title="选择关系"
                :index="formData.id ? [relation] : []"
                :dataSet="array3"
                style="width: 100%"
                @change="change($event, 'relation')"
              />
            </uni-forms-item>
            <uni-forms-item :required="!formData.id" label="性别" name="gender">
              <s-picker
                v-if="isGender"
                title="选择性别"
                :index="formData.id ? [gender] : []"
                :dataSet="array"
                style="width: 100%"
                @change="change($event, 'gender')"
              />
            </uni-forms-item>
            <uni-forms-item :required="!formData.id" name="nation" label="民族">
              <s-picker
                v-if="isNations"
                title="选择民族"
                :index="formData.id ? [nation] : []"
                :dataSet="array2"
                style="width: 100%"
                @change="change($event, 'nation')"
              />
            </uni-forms-item>
            <uni-forms-item
              :required="!formData.id"
              name="domicilePlace"
              label="户籍所在地"
            >
              <uni-easyinput
                v-model="formData.domicilePlace"
                type="text"
                maxlength="50"
                placeholder="请输入"
              />
            </uni-forms-item>
            <uni-forms-item
              :required="!formData.id"
              name="cardNum"
              label="身份证号"
            >
              <uni-easyinput
                v-model="formData.cardNum"
                type="idcard"
                maxlength="18"
                placeholder="请输入"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="footer-container" :class="formData.id ? 'btns' : null">
          <s-btn
            :title="formData.id ? '保存' : '提交'"
            style="width: 100%; margin-bottom: 40rpx; display: block"
            @submit="submit('sub')"
          />
          <s-btn
            v-if="formData.id"
            type="warn"
            title="删除"
            style="width: 100%"
            plain
            @submit="submit('del')"
          >
            <img class="icon" src="../static/image/delete-icon.png" mode="" />
          </s-btn>
        </view>
      </view>
    </s-content>
  </view>
</template>

<script>
import { nation } from "../static/js/nationality.js";
import { checkIsJSON } from "../static/js/typeJson.js";
export default {
  components: {},
  data() {
    return {
      formData: {}, // 表单数据
      array: ["男", "女"], //性别值域
      gender: [], // 回显默认
      isGender: true,
      array2: [], // 民族值域
      nation: [], // 回显默认
      isNations: true,
      array3: ["母亲", "父亲", "配偶", "子女"], // 关系值域
      relation: [], // 回显默认
      isRelation: true,
      rules: {
        // 表单校验规则
        relation: {
          rules: [
            {
              required: true,
              errorMessage: "请选择与证明人员关系",
            },
          ],
        },
        gender: {
          rules: [
            {
              required: true,
              errorMessage: "请选择性别",
            },
          ],
        },
        nation: {
          rules: [
            {
              required: true,
              errorMessage: "请选择民族",
            },
          ],
        },
        domicilePlace: {
          rules: [
            {
              required: true,
              errorMessage: "请输入户籍所在地",
            },
          ],
        },
        cardNum: {
          rules: [
            {
              required: true,
              errorMessage: "请输入身份证号码",
            },
            {
              minLength: 18,
              maxLength: 18,
              errorMessage: "请输入正确的身份证号码",
            },
          ],
        },
      },
    };
  },
  created() {
    this.array2 = nation;
  },
  /** 参数接受
   * @param {Object} option 路由参数
   */
  onLoad(option) {
    if (option.jsonData && checkIsJSON(option.jsonData)) {
      const dataObj = JSON.parse(option.jsonData);
      this.formData = {
        ...this.formData,
        ...dataObj,
      };
      // 性别回显
      if (dataObj.gender) {
        this.setEcho(this.array, dataObj.gender, "isGender", "gender");
      }
      // 民族回显
      if (dataObj.nation) {
        this.setEcho(this.array2, dataObj.nation, "isNations", "nation");
      }
      // 关系回显
      if (dataObj.nation) {
        this.setEcho(this.array3, dataObj.relation, "isRelation", "relation");
      }
    }
  },
  methods: {
    /**
     * 选择回显方法
     * @param {Arrar<any[]>} range 值域
     * @param {string} condition 条件
     * @param {string} bool
     * @param {string} echo 回显
     */
    setEcho(range, condition, bool, echo) {
      this[bool] = false;
      let num = 0;
      range.forEach((element, index) => {
        if (element === condition) {
          num = index;
        }
      });
      this[echo] = [num];
      setTimeout(() => {
        this[bool] = true;
      });
    },
    /**
     * TextPicker回调表单赋值
     * @param {Object} value 回调数据
     * @param {Object} code	表单赋值的name
     */
    change(value, code) {
      this.$refs.form.setValue(code, value);
    },
    /**
     * 页面回退传参
     * @param {string} menthName 方法名
     * @param {any} dataMsg  数据
     */
    backParameter(menthName, dataMsg) {
      const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
      const prevPage = pages[pages.length - 2]; //上一页页面实例
      const prevPage2 = pages[pages.length - 3];
      prevPage.$vm[menthName](dataMsg); // 給上一頁綁定方法otherFun,傳參object
      prevPage2.$vm[menthName](dataMsg); // 給上一頁綁定方法otherFun,傳參objec
      uni.navigateBack({
        delta: 1, // 可以不傳delta值，默認為1
      });
    },
    /**
     * 表单提交
     * @param {Object} code	判断依据参数
     */
    submit(code) {
      if (code === "del") {
        const that = this;
        uni.showModal({
          title: "提示",
          content: "是否删除该家庭成员信息",
          success: function (res) {
            if (res.confirm) {
              that.backParameter("delData", that.formData.index);
            }
          },
        });
      } else {
        this.$refs.form
          .validate()
          .then((res) => {
            this.backParameter("otherFun", { ...this.formData, ...res });
          })
          .catch((err) => {
            console.log("表单错误信息：", err);
          });
      }
    },
  },
};
</script>
<style lang="scss">
@import "../static/css/form.scss";
.footer-container {
  .icon {
    width: 40rpx;
    height: 40rpx;
  }
}
.form-state {
  &::v-deep .uni-forms {
    .uni-input-placeholder,
    .picker-text {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222 !important;
    }
    .uni-input-input,
    .uni-easyinput__content-input {
      font-weight: 400;
      color: #222222;
    }
  }
}
.btns {
  bottom: 70rpx;
  display: block;
}
</style>
